<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { useAppConfig } from '@vben/hooks';

import { Card, message } from 'ant-design-vue';

import { postHooksSync } from '#/api/admin/hooks';
import { deleteSettingCache } from '#/api/admin/setting';
import { postUserActionsSync } from '#/api/user/actions';
import Icon from '#/components/Icons';

const { baseURL } = useAppConfig(import.meta.env, import.meta.env.PROD);

const [Modal, modalApi] = useVbenModal();
const list = ref([
  {
    icon: 'ri-recycle-line',
    title: '回收站',
    link: '',
    router: '/admin/recyclebin/index',
    color: '#ffd666',
  },
  {
    icon: 'ri:file-list-3-line',
    title: '资源管理',
    link: '',
    router: '/user/adminasset/index',
    color: '#ffd666',
  },
  {
    click: 'handleClearCache',
    icon: 'ri:delete-bin-3-line',
    title: '清理缓存',
    link: '',
    router: '',
    color: '#ffc069',
  },
  {
    icon: 'ri:menu-2-line',
    title: '后台菜单',
    link: '',
    router: '/admin/menu',
    color: '#c45015',
  },
  {
    click: 'handleUserActionsSync',
    icon: 'ri:user-settings-line',
    title: '用户操作同步',
    link: '',
    router: '',
    color: '#c45015',
  },
  {
    click: 'handleHooksSync',
    icon: 'ri:refresh-line',
    title: '钩子同步',
    link: '',
    router: '',
    color: '#c45015',
  },
  {
    icon: 'ri:cloud-line',
    title: 'Swagger',
    link: `${baseURL}/swagger`,
    router: '',
    color: '#c45015',
  },
  {
    icon: 'ri:database-line',
    title: '数据管理',
    link: '',
    router: '/admin/backup',
    color: '#c45015',
  },
]);

const handleCloseDialog = () => {
  modalApi.close();
};
// 清除缓存
const handleClearCache = async () => {
  await deleteSettingCache();
  handleCloseDialog();
  message.success('成功清理缓存！');
};

// 用户操作同步
const handleUserActionsSync = async () => {
  const { msg } = await postUserActionsSync();
  handleCloseDialog();
  message.success(msg);
};

// 用户操作同步
const handleHooksSync = async () => {
  const { msg } = await postHooksSync();
  handleCloseDialog();
  message.success(msg);
};
const onclick = (item: any) => {
  if (item.click) {
    switch (item.click) {
      case 'handleClearCache': {
        handleClearCache();
        break;
      }
      case 'handleHooksSync': {
        handleHooksSync();
        break;
      }
      case 'handleUserActionsSync': {
        handleUserActionsSync();
        break;
      }
      default: {
        break;
      }
    }
  }
};
</script>
<template>
  <Modal :footer="false" class="w-3/5" title="开发面板">
    <Card>
      <div class="flex flex-wrap p-0">
        <template v-for="(item, index) in list" :key="index">
          <div
            v-if="item.click"
            class="flex-col-center group w-1/4 cursor-pointer py-8 hover:shadow-xl"
            @click="onclick(item)"
          >
            <Icon
              :color="item.color"
              :icon="item.icon"
              class="size-7 transition-all duration-300 group-hover:scale-125"
            />
            <span class="text-md mt-2 truncate">{{ item.title }}</span>
          </div>
          <a
            v-if="item.link"
            :href="item.link"
            class="flex-col-center group w-1/4 cursor-pointer py-8 hover:shadow-xl"
            target="_blank"
            @click="handleCloseDialog"
          >
            <Icon
              :color="item.color"
              :icon="item.icon"
              class="size-7 transition-all duration-300 group-hover:scale-125"
            />
            <span class="text-md mt-2 truncate">{{ item.title }}</span>
          </a>
          <router-link
            v-if="item.router"
            :to="item.router"
            class="flex-col-center group w-1/4 cursor-pointer py-8 hover:shadow-xl"
            @click="handleCloseDialog"
          >
            <Icon
              :color="item.color"
              :icon="item.icon"
              class="size-7 transition-all duration-300 group-hover:scale-125"
            />
            <span class="text-md mt-2 truncate">{{ item.title }}</span>
          </router-link>
        </template>
      </div>
    </Card>
  </Modal>
</template>

<style lang="scss">
.icon-panel-body {
  margin-bottom: 6px;
  text-align: center;
  cursor: pointer;

  .ant-card-body {
    padding: 12px;
    font-size: 12px;

    &:hover {
      svg {
        transform: scale(1.15);
      }
    }

    svg {
      display: block;
      width: 20px;
      height: 20px;
      margin: auto;
      font-size: 20px;
      transition: all ease-in-out 0.3s;
    }

    p {
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>
